/*
 * @Author: your name
 * @Date: 2021-04-21 20:35:13
 * @LastEditTime: 2021-04-26 23:59:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \fantasticit\src\components\msgcommentlist.tsx
 */
import React, { useEffect, useState } from 'react';
//引入antd 分页
import { Pagination } from "antd";
// 包裹组件
import { observer } from 'mobx-react-lite';
import './msgcommentlist.less';
// 引入useStore
import useStore from '@/context/useStore';
//引入时间戳
import { timeAgo } from "../util/getTime"
//引入评论组件
// import Comment from "./comment"
//点击回复留言板样式
import styles from './comment.less';
//引入for-editor
import Editor from "for-editor";

const msgcommentlist: React.FC = () => {
  const [flag,setFlag] = useState(true);
  const [index,setindex] = useState(-1);
  const toolbar = {};
  // 样式
  const style = {
    width: '730px',
    height: '140px',
    borderRadius: '2px',
    boxShadow: 'none',
    verticalAlign: 'bottom',
  };
  //   const viewer = new Viewer((e.target as unknown as HTMLElement), {
  // inline: false,button:true,
  // viewed() {
  //   viewer.zoomTo(1);
  // },});
  // 解构useStore
  let { msgcommentID, msgcommentlist } = useStore();
  // console.log(msgcommentlist.getcommentList);
  //请求接口  
  //回复
  const [Index, setIndex] = useState(-1);
  //绑定点击事件(回复)
  function reply(index: number) {
    setIndex(index);
  }

  //分页
  useEffect(() => {
    // 获取留言列表
    msgcommentlist.getMsgcommentList(msgcommentID.getcommentId.id, 1)
  }, [msgcommentID.getcommentId.id])
  // 点击页码切换
  function onPageChange(page: number) {
    msgcommentlist.getMsgcommentList(msgcommentID.getcommentId.id, page)
  }
  // 收起评论
  function hide(index: number) {
    // msgcommentlist.getcommentList[index].pass = true;
    setindex(index);
    setFlag(false);

    console.log('====================================');
    console.log(index);
    console.log('====================================');
  };
  return (

    <div className="host">
      <ul>
        {msgcommentlist.getcommentList.map((item, index) => (
          <li key={item.id}>
            <div className="main">
              <span>{item.name.split('')[0]}</span>
              <p >{item.name}</p>
            </div>
            <div className='h3'
              dangerouslySetInnerHTML={{ __html: item.html || item.content }}
            ></div>
            <div className="times">
              <span>{item.userAgent}</span> 
              <span>{timeAgo(+new Date(item.createAt))}前</span>
              <span onClick={() => {
                reply(index)
              }}>
                <i className="iconfont icon-xinxi"></i> 回复
            </span>
            </div>

            {item.children.length > 0
              ? item.children.map((item) => (
                <div key={item.id} className='mains'>
                  <div className="timess">
                    <span>{item.name.split('')[0]}</span>
                    <p>{item.name}</p>
                    回复
                    <b>{item.replyUserName}</b>
                  </div>
                  <div className='dd'
                    dangerouslySetInnerHTML={{
                      __html: item.html || item.content,
                    }}
                  ></div>
                  <div className="times">
                    <span>{item.userAgent}</span>
                    <span>{timeAgo(+new Date(item.createAt))}前</span>
                    <span>
                      <i className="iconfont icon-xinxi " > </i> 回复
                    </span>
                  </div>
                </div>
              ))
              : ''}

            <div>{Index == index && flag ?  <div className={styles.text}>
              <Editor
                lineNum={false}
                toolbar={toolbar}
                placeholder="请输入评论内容（可输入 Markerdown 语法内容）"
                tab
                style={style}
              ></Editor>
              <div className={styles.input}>
                <input type="text" placeholder="请输入您的称呼" className={styles.input_left} />
                <input
                  type="text"
                  placeholder="请输入您的邮箱（不会公开，您也可以选择不输入）" className={styles.input_right}
                />
              </div>

              <div className={styles.but}>
                <button onClick={() => {
                  hide(index);
                }}>收起</button>
                <button>评论</button>
              </div>
            </div> : ''}
            </div>
          </li>
        ))}
      </ul>
      <div><Pagination pageSize={6} total={14} onChange={onPageChange} /></div>

    </div>


  );
};
export default observer(msgcommentlist);
